<template>
  <div class="user-manual-select-tabs">
    <div :class="{'user-manual-select-tab-selected': tab.nodeId === innerModelValue}"
         :key="tab.nodeId" @click="() => change(tab)"
         v-for="tab in tabs" class="user-manual-select-tab">
      <van-text-ellipsis :content="tab.nodeName" />
    </div>
  </div>
</template>
<script setup>
import {createProps} from '@/utils';
import {computed, defineModel} from 'vue';

defineOptions({name: 'UserManualSelectTabs'});

const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  userManualSelect: createProps(Object, () => ({})),
})
const model = defineModel();


const tabs = computed(() => {
  let res = []
  try {
    res = props.userManualSelect.select
  } catch(e) {
  }
  return res;
})

function change({ nodeId }) {
  model.value = nodeId;
}

const innerModelValue = computed({
  get() {
    if (model.value) {
      return model.value;
    }

    try {
      return model.value = tabs.value[0].nodeId;
    } catch (e) {
      console.log(e)
    }
  },
  set(v) {
    model.value = v;
  },
})

</script>
<style scoped lang="less">
.user-manual-select-tabs {
  display: flex;
  align-content: center;
  justify-content: center;
  overflow: auto;
  padding: 0 10px;
}

.user-manual-select-tab {
  padding: 5px 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  max-width: 7em;
}

.user-manual-select-tab-selected {
  border-bottom-color: #1989fa;
}
</style>